<template>
  <div style="width: 100%;min-height: 100vh" v-loading="loading"
       element-loading-text="品牌信息加载中..." class="home-bg">
    <div class="header-nav-home"
         style="background: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.3)"
         :style="{paddingTop:'20px',paddingBottom:'20px',
   paddingLeft:'20px',paddingRight:'20px'}">
      <div class="flex items-center justify-between" style="margin-bottom: 5px">
        <h3 style="margin-left: 10px;font-size: 20px;font-weight: 700">{{ scrStore.brandName }}</h3>
        <div style="margin: 0 20px" class="enter-shenmi">
          <el-button type="primary" round class="target-proint" @click="toLogin">{{ scrStore.brandName }}网点入口
          </el-button>
        </div>
      </div>
      <div class="nav-header-to" style="display: flex;justify-content: flex-end">
        <el-menu
          :default-active="menuNameShou"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="selectNav"
        >
          <el-menu-item  index="首页" key="首页">
            <NuxtLink
              to="/userhome/pageindex">
              首页
            </NuxtLink>
          </el-menu-item>
          <template v-for="item in scrStore.guanwangPage" :key="item.name">
            <el-menu-item v-if="!item.children" :index="item.name" :key="item.name">
              <NuxtLink
                :to="item.path">
                {{ item.name }}
              </NuxtLink>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>

    <div :style="{marginTop:marginHeader+'px'}">
      <nuxt-page />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getItem, setItem } from '~/utils/index'
  import { getPinLogingBg } from '~/api/login'
  import { useRouter } from 'vue-router'
  import { screenStore } from '~/stores/modules/screen'
  const router = useRouter()
  const scrStore = screenStore()
  const menuNameShou = ref('首页')
  const loading = ref(false)
  const homeRouter = reactive([
    {
      name:'首页',
      path:'/userhome/pageindex'
    },
    {
      name:'公司介绍',
      path:'/userhome/companyIntro'
    },
    {
      name:'新闻资讯',
      path:'/userhome/information'
    },
    {
      name:'联系方式',
      path:'/userhome/phonemy'
    }
  ])
  const marginHeader = ref(115)
  onMounted(() => {
    loading.value = true
    const id = getItem('pinpaiId')
    getPinLogingBg(id).then(res => {
      if (res.code == 200) {
        loading.value = false
        const options = {
          title: res.data.brandName,
          meta: [
            {
              name: 'keywords',
              content: ''
            },
            { name: 'description', content: '' }
          ]
        }
        if (res.data.keywordsJson) {
          options.meta[0].content = res.data.keywordsJson.split(',').join(',')
        } else {
          options.meta[0].content = '神秘,调查,信任,运动'
        }
        if (res.data.describeJson) {
          options.meta[1].content = res.data.describeJson
        } else {
          options.meta[1].content = '一家很棒的神秘客公司'
        }
        scrStore.brandName = res.data.brandName
        useHead(options)
        router.push({ path: '/userhome/pageindex' })
      } else {
        loading.value = false
      }
    }).catch(() => {
      loading.value = false
    })

    nextTick(()=>{
      const headerEl = document.querySelector('.header-nav-home')
      marginHeader.value = headerEl.clientHeight
    })
  })

  function toLogin() {
    router.push({ path: '/login' })
  }

</script>

<style scoped lang="less">
  .enter-shenmi ::v-deep .el-button {
    background: #041850 !important;
  }

  .header-nav-home {
   height: 125px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
  }

  .home-bg {
    background: url("https://www.knschina.cn/Public/Home/images/bg_1.jpg") no-repeat;
    background-size: cover;
  }


  .nav-header-to .el-menu--horizontal > .el-menu-item.is-active {
    color: #041850 !important;
    border-bottom: 2px solid #041850;
    font-size: 15px !important;
  }

  .nav-header-to .el-menu-horizontal > .el-sub-menu:hover .el-sub-menu_title {
    color: #041850 !important;
  }

  .nav-header-to .el-menu--horizontal.el-menu {
    border-bottom: none;
  }
</style>
